<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Button type="primary" @click="handleAllocation">新增</Button>
            <Table highlight-row :columns="columns" :data="data" class="ivu-mt-16">
                <template slot-scope="{ row }" slot="status">
                    <Badge v-if="row.status ==='1'" status="success" text="正常" />
                    <Badge v-if="row.status ==='0'" status="error" text="停用" />
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a @click="handleAllocation">编辑</a>
                </template>
            </Table>
            <div class="ivu-mt iuv-text-center">
                <Page :total="100" show-total />
            </div>
        </Card>
        <Modal v-model="modal" title="新增" @on-ok="handleSubmit" @on-cancel="handleDrawerCancel">
            <Form :model="formItem" :label-width="80">
                <FormItem label="名称" required>
                    <Input v-model="formItem.input" placeholder="请输入"></Input>
                </FormItem>
                <FormItem label="状态">
                    <i-switch v-model="formItem.switch">
                        <span slot="open">On</span>
                        <span slot="close">Off</span>
                    </i-switch>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
export default {
    name: 'diagnosis',
    data() {
        return {
            modal: false,
            formItem: {
                input: '',
                switch: true
            },
            columns: [
                {
                    title: '名称',
                    key: 'name'
                },
                {
                    title: '状态',
                    slot: 'status'
                },
                {
                    title: '操作',
                    slot: 'operation'
                }
            ],
            data: [
                {
                    name: '医助',
                    status: '0'
                },
                {
                    name: '客服',
                    status: '1'
                },
                {
                    name: '运营',
                    status: '1'
                }
            ]
        }
    },
    methods: {
        handleAllocation() {
            this.modal = true
        },
        handleDrawerCancel() {
            this.$Message.warning('已取消!')
        },
        handleSubmit() {
            this.$Message.success('操作成功!')
        }
    }
}
</script>

<style scoped>
</style>
